<main>
  <header>
    <h1>HTML5 Test Page</h1>
    <p>
      This is a test page filled with common HTML elements to be used to provide
      visual feedback whilst building CSS systems and frameworks.
    </p>
  </header>

  <h1>Heading 1 Lorem ipsum dolor sit amet</h1>

  <nav class="breadcrumbs" aria-label="breadcrumbs">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">User</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Advanced Settings</a></li>
      <li><a href="#">Breadcrumbs</a></li>
    </ol>
  </nav>

  <h2>Heading 2 Lorem ipsum dolor sit amet</h2>
  <h3>Heading 3 Lorem ipsum dolor sit amet</h3>
  <h4>Heading 4 Lorem ipsum dolor sit amet</h4>
  <h5>Heading 5 Lorem ipsum dolor sit amet</h5>
  <h6>Heading 6 Lorem ipsum dolor sit amet</h6>

  <p>
    A paragraph (from the Greek paragraphos, “to write beside” or “written
    beside”) is a self-contained unit of a discourse in writing dealing with a
    particular point or idea. A paragraph consists of one or more sentences.
    Though not required by the syntax of any language, paragraphs are usually an
    expected part of formal writing, used to organize longer prose.
  </p>

  <blockquote>
    <p>
      A block quotation (also known as a long quotation or extract) is a
      quotation in a written document, that is set off from the main text as a
      paragraph, or block of text.
    </p>
    <p>
      It is typically distinguished visually using indentation and a different
      typeface or smaller size quotation. It may or may not include a citation,
      usually placed at the bottom.
    </p>
  </blockquote>
  <p>— Nobody, <cite>Nonexistent Book</cite></p>

  <dl>
    <dt>Definition List Title</dt>
    <dd>This is a definition list division.</dd>
  </dl>

  <ol type="1">
    <li>List Item 1</li>
    <li>
      List Item 2
      <ol type="A">
        <li>List Item 1</li>
        <li>
          List Item 2
          <ol type="a">
            <li>List Item 1</li>
            <li>
              List Item 2
              <ol type="I">
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ol type="i">
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                  </ol>
                </li>
                <li>List Item 3</li>
              </ol>
            </li>
            <li>List Item 3</li>
          </ol>
        </li>
        <li>List Item 3</li>
      </ol>
    </li>
    <li>List Item 3</li>
  </ol>

  <ul>
    <li>List Item 1</li>
    <li>
      List Item 2
      <ul>
        <li>List Item 1</li>
        <li>
          List Item 2
          <ul>
            <li>List Item 1</li>
            <li>
              List Item 2
              <ul>
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ul>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                  </ul>
                </li>
                <li>List Item 3</li>
              </ul>
            </li>
            <li>List Item 3</li>
          </ul>
        </li>
        <li>List Item 3</li>
      </ul>
    </li>
    <li>List Item 3</li>
  </ul>

  <details>
    <summary>Expand for details</summary>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio
      natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique
      voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos!
      Ipsa.
    </p>
  </details>

  <address>
    <p>
      Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
      Visit us at:<br />
      Example.com<br />
      Box 564, Disneyland<br />
      USA
    </p>
  </address>

  <hr />

  <table>
    <caption>
      Table Caption
    </caption>
    <thead>
      <tr>
        <th>Table Heading 1</th>
        <th>Table Heading 2</th>
        <th>Table Heading 3</th>
        <th>Table Heading 4</th>
        <th>Table Heading 5</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Table Footer 1</th>
        <th>Table Footer 2</th>
        <th>Table Footer 3</th>
        <th>Table Footer 4</th>
        <th>Table Footer 5</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Table Cell 1</td>
        <td>Table Cell 2</td>
        <td>Table Cell 3</td>
        <td>Table Cell 4</td>
        <td>234235</td>
      </tr>
      <tr>
        <td>Table Cell 1</td>
        <td>Table Cell 2</td>
        <td>Table Cell 3</td>
        <td>Table Cell 4</td>
        <td>346896</td>
      </tr>
      <tr>
        <td>Table Cell 1</td>
        <td>Table Cell 2</td>
        <td>Table Cell 3</td>
        <td>Table Cell 4</td>
        <td>065454</td>
      </tr>
      <tr>
        <td>Table Cell 1</td>
        <td>Table Cell 2</td>
        <td>Table Cell 3</td>
        <td>Table Cell 4</td>
        <td>143539</td>
      </tr>
    </tbody>
  </table>

  <p>
    <strong>Keyboard input:</strong> <kbd><kbd>Cmd</kbd> <kbd>A</kbd></kbd>
  </p>
  <p>
    <strong>Inline code:</strong>
    <code class="language-none">&lt;div&gt;code&lt;/div&gt;</code>
  </p>
  <p>
    <strong>Sample output:</strong>
    <samp>This is sample output from a computer program.</samp>
  </p>

  <pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre
  >

  <p><a href="#!">This is a text link</a>.</p>
  <p><strong>Strong is used to indicate strong importance.</strong></p>
  <p><em>This text has added emphasis.</em></p>
  <p>
    The <b>b element</b> is stylistically different text from normal text,
    without any special importance.
  </p>
  <p>The <i>i element</i> is text that is offset from the normal text.</p>
  <p>
    The <u>u element</u> is text with an unarticulated, though explicitly
    rendered, non-textual annotation.
  </p>
  <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
  <p><s>This text has a strikethrough</s>.</p>
  <p>Superscript<sup>®</sup>.</p>
  <p>Subscript for things like H<sub>2</sub>O.</p>
  <p><small>This small text is small for fine print, etc.</small></p>
  <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
  <p>
    <q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q"
      >This text is a short inline quotation.</q
    >
  </p>
  <p><cite>This is a citation.</cite></p>
  <p>The <dfn>dfn element</dfn> indicates a definition.</p>
  <p>The <mark>mark element</mark> indicates a highlight.</p>
  <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
  <p>
    The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>
  </p>

  <p><img src="https://placekitten.com/480/480" alt="Photo of a kitten" /></p>

  <figure>
    <img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
  </figure>

  <figure>
    <img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
    <figcaption>Here is a caption for this image.</figcaption>
  </figure>

  <figure>
    <picture>
      <source
        srcset="https://placekitten.com/800/800"
        media="(min-width: 800px)"
      />
      <img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
    </picture>
  </figure>

  <div><audio controls="">audio</audio></div>

  <div><video controls="">video</video></div>

  <p>
    <label>Meter: <meter value="2" min="0" max="10">2 out of 10</meter></label>
  </p>

  <p>
    <label>Progress: <progress>progress</progress></label>
  </p>
  <form>
    <fieldset id="forms__input">
      <legend>Input fields</legend>

      <div class="table rows">
        <p>
          <label for="input__text">Text Input</label>
          <input id="input__text" type="text" placeholder="Text Input" />
        </p>
        <p>
          <label for="input__password">Password</label>
          <input
            id="input__password"
            type="password"
            placeholder="Type your Password"
          />
        </p>
        <p>
          <label for="input__webaddress">Web Address</label>
          <input
            id="input__webaddress"
            type="url"
            placeholder="https://yoursite.com"
          />
        </p>
        <p>
          <label for="input__emailaddress">Email Address</label>
          <input
            id="input__emailaddress"
            type="email"
            placeholder="name@email.com"
          />
        </p>
        <p>
          <label for="input__phone">Phone Number</label>
          <input id="input__phone" type="tel" placeholder="(999) 999-9999" />
        </p>
        <p>
          <label for="input__search">Search</label>
          <input
            id="input__search"
            type="search"
            placeholder="Enter Search Term"
          />
        </p>
        <p>
          <label for="input__text2">Number Input</label>
          <input id="input__text2" type="number" placeholder="Enter a Number" />
        </p>
        <p>
          <label for="input__file">File Input</label>
          <input id="input__file" type="file" />
        </p>
      </div>
    </fieldset>

    <fieldset id="forms__select">
      <legend>Select menus</legend>
      <p>
        <label for="select">Select</label>
        <select id="select">
          <optgroup label="Option Group">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </optgroup>
        </select>
      </p>
      <p>
        <label for="select_multiple">Select (multiple)</label>
        <select id="select_multiple" multiple="multiple">
          <optgroup label="Option Group">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </optgroup>
        </select>
      </p>
    </fieldset>

    <fieldset id="forms__checkbox">
      <legend>Checkboxes</legend>
      <ul>
        <li>
          <label for="checkbox1"
            ><input
              id="checkbox1"
              name="checkbox"
              type="checkbox"
              checked="checked"
            />
            Choice A</label
          >
        </li>
        <li>
          <label for="checkbox2"
            ><input id="checkbox2" name="checkbox" type="checkbox" /> Choice
            B</label
          >
        </li>
        <li>
          <label for="checkbox3"
            ><input id="checkbox3" name="checkbox" type="checkbox" /> Choice
            C</label
          >
        </li>
      </ul>
    </fieldset>

    <fieldset id="forms__radio">
      <legend>Radio buttons</legend>
      <ul>
        <li>
          <label for="radio1"
            ><input id="radio1" name="radio" type="radio" checked="checked" />
            Option 1</label
          >
        </li>
        <li>
          <label for="radio2"
            ><input id="radio2" name="radio" type="radio" /> Option 2</label
          >
        </li>
        <li>
          <label for="radio3"
            ><input id="radio3" name="radio" type="radio" /> Option 3</label
          >
        </li>
      </ul>
    </fieldset>

    <fieldset id="forms__textareas">
      <legend>Textareas</legend>
      <p>
        <label for="textarea">Textarea</label>
        <textarea
          id="textarea"
          rows="8"
          cols="48"
          placeholder="Enter your message here"
        ></textarea>
      </p>
    </fieldset>

    <fieldset id="forms__html5" class="table rows">
      <legend>HTML5 inputs</legend>
      <p>
        <label for="ic">Color input</label>
        <input type="color" id="ic" value="#000000" />
      </p>
      <p>
        <label for="in">Number input</label>
        <input type="number" id="in" min="0" max="10" value="5" />
      </p>
      <p>
        <label for="ir">Range input</label>
        <input type="range" id="ir" value="10" />
      </p>
      <p>
        <label for="idd">Date input</label>
        <input type="date" id="idd" value="1970-01-01" />
      </p>
      <p>
        <label for="idm">Month input</label>
        <input type="month" id="idm" value="1970-01" />
      </p>
      <p>
        <label for="idw">Week input</label>
        <input type="week" id="idw" value="1970-W01" />
      </p>
      <p>
        <label for="idt">Datetime input</label>
        <input type="datetime" id="idt" value="1970-01-01T00:00:00Z" />
      </p>
      <p>
        <label for="idtl">Datetime-local input</label>
        <input type="datetime-local" id="idtl" value="1970-01-01T00:00" />
      </p>
      <p>
        <label for="idl">Datalist</label>
        <input type="text" id="idl" list="example-list" />
        <datalist id="example-list">
          <option value="Example #1"></option>
          <option value="Example #2"></option>
          <option value="Example #3"></option>
        </datalist>
      </p>
      <div role="radiogroup" aria-labelledby="radio-buttons-lbl">
        <span id="radio-buttons-lbl">Radio buttons</span>
        <div>
          <div>
            <label for="radiobtn1">
              <input type="radio" name="radiobtn" id="radiobtn1" />
              Option 1</label
            >
          </div>
          <div>
            <label for="radiobtn2">
              <input type="radio" name="radiobtn" id="radiobtn2" />
              Option 2</label
            >
          </div>
          <div>
            <label for="radiobtn3">
              <input type="radio" name="radiobtn" id="radiobtn3" />
              Option 3</label
            >
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset id="forms__action">
      <legend>Action buttons</legend>
      <p class="tool-bar">
        <input type="submit" value="<input type=submit>" />
        <input type="button" value="<input type=button>" />
        <input type="reset" value="<input type=reset>" />
        <input type="submit" value="<input disabled>" disabled="" />
      </p>
      <p class="tool-bar">
        <button type="submit">&lt;button type=submit&gt;</button>
        <button type="button">&lt;button type=button&gt;</button>
        <button type="reset">&lt;button type=reset&gt;</button>
        <button type="button" disabled="">&lt;button disabled&gt;</button>
      </p>
    </fieldset>
  </form>
</main>
